<template>
    <div class="main-view">
        <el-table :loading="loading" :data="tableData" height="100%" style="width: 100%">
            <el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item.prop" :title="item.prop" :label="item.label" :width="item.width">
                <template #default="scope">
                    <router-link to="/configuration" v-if="item.routerLink === true">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto">
                            <template #default>
                                <div>{{ scope.row[item.prop] }}</div>
                            </template>
                            <template #reference>
                                <span>{{ scope.row[item.prop] }}</span>
                            </template>
                        </el-popover>
                    </router-link>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { onMounted, watch, reactive, toRefs, ref } from 'vue'
import axios from '@/utils/axios'

export default {
    name: 'MainView',
    props: ['navIndex'],
    setup(props) {
        const loading = ref(true)
        const state = reactive({
            tableHead: [],
            tableData: []
        })

        // Datasets选项卡 表头数据
        let datasetsTableHead = [
            {
                label: "Id",
                prop: "id",
                width: 200
            },
            {
                label: "DataSet",
                prop: "dataSet",
                routerLink: true,
                width: 360
            },
            {
                label: "DataBase",
                prop: "dataBase",
                width: 360
            },
            {
                label: "Engine",
                prop: "engine",
                width: ''
            }
        ]
        let datasetsTableData = []

        // Indicators选项卡 表头数据
        let indicatorsTableHead = [
            {
                label: "Id",
                prop: "id",
                width: 100
            },
            {
                label: "DetailName",
                prop: "detailName",
                routerLink: true,
                width: 350
            },
            {
                label: "IndicatorType",
                prop: "indicatorType",
                width: 150
            },
            {
                label: "Formula",
                prop: "formula",
                popoverIsShow: true,
                width: 240
            },
            {
                label: "AlertEnabled",
                prop: "alertEnabled",
                width: 150
            },
            {
                label: "ProcessType",
                prop: "processType",
                width: 150
            },
            {
                label: "Threshold",
                prop: "threshold",
                popoverIsShow: true,
                width: 240
            },
            {
                label: "Frequency",
                prop: "frequency",
                width: 120
            },
            {
                label: "RobotKey",
                prop: "robotKey",
                popoverIsShow: true,
                width: 240
            },
            {
                label: "Category",
                prop: "category",
                width: ''
            },
        ]
        let indicatorsTableData = []

        // Datasets选项卡 数据获取
        const funcGetDatasetsData = () => {
            console.log('1312313131231');
            state.tableHead = datasetsTableHead
            state.tableData.length = 0
            const res = {"status":{"statuscode":"0","message":"success"},"data":{"entities":[{"id":1,"dataBase":"events_db","dataSet":"event_log","engine":"BTree"},{"id":2,"dataBase":"op_stat_db","dataSet":"trace_log","engine":"BTree"},{"id":3,"dataBase":"op_stat_db","dataSet":"event_log","engine":"BTree"}]}}
            const data = res.data
            if (data?.entities) {
                datasetsTableData = data.entities
                state.tableData = JSON.parse(JSON.stringify(datasetsTableData))
            }
            /* axios.get(`/bzmonitor/config/dataset`).then(res => {
                if (res && res?.data) {
                    const data = res.data
                    if (data?.entities) {
                        datasetsTableData = data.entities
                        state.tableData = JSON.parse(JSON.stringify(datasetsTableData))
                    }
                }
            }) */
        }

        // Indicators选项卡 数据获取
        const funcGetIndicatorsData = () => {
            state.tableHead = indicatorsTableHead
            state.tableData.length = 0
            axios.get(`/bzmonitor/config/indicators`).then(res => {
                if (res && res?.data) {
                    const data = res.data
                    if (data?.entities) {
                        var entities = data.entities;
                        if (entities.length > 0) {
                            let item
                            for (let i = 0; i < entities.length; i++) {
                                item = entities[i]
                                if (Object.prototype.hasOwnProperty.call(item, 'indicatorType')) {
                                    item.indicatorType = item.indicatorType == 1 ? '普通指标' : '个人指标';
                                }
                                if (Object.prototype.hasOwnProperty.call(item, 'alertEnabled')) {
                                    item.alertEnabled = item.alertEnabled == 1 ? '开启' : '关闭';
                                }
                                if (Object.prototype.hasOwnProperty.call(item, 'processType')) {
                                    item.processType = item.processType == 1 ? '流处理' : '批处理';
                                }
                            }
                        }
                        indicatorsTableData = entities
                        state.tableData = JSON.parse(JSON.stringify(indicatorsTableData))
                    }
                }
            })
        }

        // 数据显示控制 
        watch(() => props.navIndex, (val) => {
            switch(val) {
                case '1': // Datasets选项卡
                    state.tableHead = datasetsTableHead
                    state.tableData = datasetsTableData
                    break;
                case '2': // Indicators选项卡
                    if (!indicatorsTableData.length) {
                        funcGetIndicatorsData()
                    }
                    else{
                        state.tableHead = indicatorsTableHead
                        state.tableData = indicatorsTableData
                    }
                    break;
                default:
                    return;
            }
        })

        onMounted(() => {
            funcGetDatasetsData() // 默认获取 Datasets选项卡 中的数据
        })

        return {
            loading,
            ...toRefs(state)
        }
    }
}
</script>

<style>
    .main-view {
        height: 100%;
        background: #fff;
    }
</style>
